<template>
  <el-dialog
    v-el-drag-dialog
    class="dailyCenter-AddDialog"
    title="新增日结"
    :visible.sync="isShow"
    width="700px"
    @closed="close"
  >
    <el-form
      ref="dataForm"
      class="form"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="110px"
    >
      <el-form-item label="门店" prop="orgId">
        <el-tree-select
          v-model="form.orgId"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择门店',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            props: {
              value: 'orgId',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData,
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="日结日期" prop="date">
        <el-input
          v-model="dateText"
          placeholder="请选择日结日期"
          @focus="dateFocus"
          @blur="dateBlur"
        />
        <el-calendar v-if="isShowDate" v-model="form.date">
          <template #dateCell="{ data }">
            <template v-for="(item, index) in monthData">
              <div
                v-if="item.happendDt.slice(0, 10) === data.day"
                :key="index"
                :class="
                  item.accStatus == 2 && item.stockStatus == 2
                    ? 'isConfirm'
                    : 'waitConfirm'
                "
              >
                <span>{{
                  item.accStatus == 2 && item.stockStatus == 2 ? "已确认" : "待确认"
                }}</span>
              </div>
            </template>
            <p class="dateText">
              {{ data.day.split("-").slice(1).join("-") }}
            </p>
          </template>
        </el-calendar>
      </el-form-item>
      <el-form-item label="日结时间点" prop="time">
        <el-time-select
          v-model="form.time"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '24:00',
          }"
          placeholder="选择日结时间点"
          @focus="timeFocus"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save"> 提交 </el-button>
      <el-button @click="close"> 关闭 </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { dailyCenterBillByMonth, dailyCenterAddSave } from '@/api'
  import dayjs from 'dayjs'
  export default {
    props: {
      treeData: {
        type: Array
      }
    },
    data() {
      return {
        isShow: false,
        form: {
          orgId: '',
          orgSNNo: '', // 门店编号
          orgName: '', // 门店编号
          date: '',
          time: ''
        },
        dateText: '',
        isShowDate: false,
        rules: {
          orgId: [{ required: true, message: '请选择门店', trigger: 'change' }],
          date: [{ required: true, message: '请选择日结日期', trigger: 'change' }],
          time: [{ required: true, message: '请选择日结时间点', trigger: 'change' }]
        },
        monthData: []
      }
    },
    watch: {
      'form.date': function(val, oldVal) {
        if (val) this.dateText = dayjs(val).format('YYYY-MM-DD')
        const isNewMonth = dayjs(val).get('month') !== dayjs(oldVal).get('month')
        if (this.form.orgId && isNewMonth) this.getMonthData(val)
      }
    },
    methods: {
      show() {
        this.isShow = true
      },
      close() {
        this.isShow = false
        this.isShowDate = false
        this.dateText = ''
        this.monthData = []
        this.$refs['dataForm'].resetFields()
      },
      // 获取每月数据
      async getMonthData(time) {
        const params = {
          happendTime: time,
          orgId: this.form.orgId
        }
        const { status, data } = await dailyCenterBillByMonth(params)
        if (status === 200) {
          this.monthData = data
        }
      },
      selectTreeChange(value) {
        this.form.orgId = value.orgId
        this.form.orgName = value.orgName
        if (this.form.date) this.getMonthData(this.form.date)
      },
      dateFocus() {
        this.isShowDate = true
        if (!this.form.date) {
          this.form.date = new Date()
          this.dateText = dayjs(this.form.date).format('YYYY-MM-DD')
        }
      },
      dateBlur() {
        this.dateText = dayjs(this.form.date).format('YYYY-MM-DD')
      },
      timeFocus() {
        this.isShowDate = false
      },
      // 提交
      save() {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) return
          this.saveSubmit()
        })
      },
      async saveSubmit() {
        let date = dayjs(this.form.date).set('hour', this.form.time.slice(0, 2))
        date = dayjs(dayjs(date).format('YYYY-MM-DD HH:00:00')).toDate()
        const params = {
          orgId: this.form.orgId,
          orgSNNo: this.form.orgId, // 门店编号
          orgName: this.form.orgName, // 门店名称
          happendTime: date.toString()
        }

        const { status, data } = await dailyCenterAddSave(params)
        if (status === 200) {
          this.$notify({
            title: '提示',
            message: data,
            type: 'success',
            duration: 2000
          })
          this.$emit('refresh')
          this.close()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.dailyCenter-AddDialog {
  .el-calendar {
    margin-top: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    /deep/.el-calendar-day {
      position: relative;

      > div + p {
        color: #fff;
      }

      .dateText {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 1;
      }

      @mixin call {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 40px 8px 8px 8px;
        color: #fff;
        box-sizing: border-box;
        // z-index: -1;
      }

      .isConfirm {
        @include call;

        background: #399bff;
      }

      .waitConfirm {
        @include call;

        background: #ed912e;
      }
    }

    /deep/.is-selected {
      .el-calendar-day {
        .isConfirm,
        .waitConfirm,
        p {
          color: #606266;
          background-color: #f2f8fe;
        }
      }
    }
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>
